<template>
  <div>
    <el-container>
      <el-header>
        <el-button @click="Return()">返回</el-button> <span> 写文章 </span>
        <div>
          <el-button
            type="primary"
            round
            @click="submit"
            icon="el-icon-document-checked"
            >发布</el-button
          >
        </div>
      </el-header>

      <el-main>
        <div>
          <el-input
            placeholder="请输入文章标题"
            v-model="input"
            clearable
            prefix-icon="el-icon-star-on"
          >
          </el-input>
          <el-input
            placeholder="请输入文章简介"
            v-model="input1"
            clearable
            prefix-icon="el-icon-star-on"
          >
          </el-input>

          <el-radio v-model="radio" label="HTML" border>HTML</el-radio>
          <el-radio v-model="radio" label=".NET Core" border>.NET Core</el-radio>
          <el-radio v-model="radio" label="C#" border>C#</el-radio>
          <el-radio v-model="radio" label="Vue" border>Vue</el-radio>
          <el-radio v-model="radio" label="Java" border>Java</el-radio>
        </div>
        <mavon-editor
          v-model="content"
          ref="md"
          @change="change"
          style="min-height: calc(100vh - 140px)"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { ArticleAdd,Getcategoryall } from "@/api/Blogslist.js";
import { Getbyids } from "@/request/auth.js";
export default {
  components: {
    mavonEditor,
  },
  data() {
    return {
      // 输入的markdown
      content: "", // 及时转的html
      html: "",
      input: "",
      input1: "",
      radio: "",
    };
  },
  methods: {
    // 所有操作都会被解析重新渲染
    Return() {
      this.$router.push("/mall");
      window.location.reload();
    },
    change(value, render) {
      this.html = render;
    }, // 提交
    submit() {
      let userids = Getbyids();
      console.log(this.radio);
      var add = {
        userid: userids,
        title: this.input,
        appArticleContent: this.content,
        ArticleIntroduction: this.input1,
        categoryname: this.radio,
      };
      ArticleAdd(add).then((res) => {
        console.log(res);
        this.$router.push("/mall");
        window.location.reload();
      });
      console.log(this.input);
      console.log(this.content);
      console.log(this.html);
    },
  },
};
</script>

<style>
body {
  margin: 0px !important;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #130f0f;
  color: rgb(255, 255, 255);
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
</style>F